<template>
  <div class="wrapper">
    <div class="list">
      <div
        v-for="(item, index) in Object.keys(promotionList)"
        :key="index"
        class="list-item"
        :class="{ active: selectedIndex == index }"
        @click="clickPromotion(item, index)"
      >
        {{ typeOption(item).title }}
      </div>

      <!-- <div class="list-item" >暂无活动</div> -->
    </div>
    <div class="content">
      <div v-if="showPromotionList">
        <!-- <div class="search-views">
          <Input v-model="value11" disabled class="search">
          <span slot="prepend">店铺名称</span>
          </Input>
          <Button type="primary">选择</Button>

        </div> -->

        <div class="tables">
          <el-table
            height="350"
            tooltip
            :loading="loading"
            :data="showPromotionList"
          >
            <el-table-column
              v-for="(item, selected) in activeColumns"
              :key="item.key"
              :width="item.width"
              :label="item.title"
              min-width="100"
              :prop="item.key"
              :show-overflow-tooltip="true"
              fixed="right"
            >
              <template slot-scope="{ row, $index }">
                <span v-if="item.key == 'originalPrice' || item.key == 'price'">
                  {{ row[item.key] | unitPrice('￥') }}
                </span>
                <span v-else-if="item.key == 'promotionApplyStatus'">
                  <span v-if="row.promotionApplyStatus === 'APPLY'">申请</span>
                  <span v-else-if="row.promotionApplyStatus === 'PASS'">
                    通过
                  </span>
                  <span v-else>拒绝</span>
                </span>
                <span v-else-if="item.key == 'timeLine'">
                  {{ row[item.key] }}点
                </span>
                <span v-if="item.key == 'action'">
                  <el-button
                    v-if="$index === index"
                    type="primary"
                    size="small"
                    @click="selectedPromotion(row, $index)"
                  >
                    已选
                  </el-button>
                  <el-button
                    v-if="$index !== index"
                    size="small"
                    @click="selectedPromotion(row, $index)"
                  >
                    选择
                  </el-button>
                </span>
                <span v-else>{{ row[item.key] }}</span>
              </template>
            </el-table-column>
          </el-table>

          <!-- <pagination
          :page.sync="params.current"
          :total="totals"
          :limit.sync="params.size"
          @pagination="changesize"
          size="small"
          show-total
          show-elevator
          show-sizer
        ></pagination> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getAllPromotion } from '@/api/promotion/activity';

export default {
  data() {
    return {
      totals: 0, // 总数
      loading: true, //表格请求数据为true
      promotionList: '', // 活动列表
      selectedIndex: 0, //左侧菜单选择
      promotions: '', //选中的活动key
      index: -1, // 已选下标
      params: {
        // 请求参数
        current: 1,
        size: 10,
      },
      pintuanColumns: [
        // 表头
        {
          title: '活动标题',
          key: 'title',
          tooltip: true,
          width: 250,
        },
        {
          title: '商品名称',
          key: 'goodsName',
          tooltip: true,
        },
        {
          title: '店铺名称',
          key: 'storeName',
          tooltip: true,
        },
        {
          title: '开始时间',
          key: 'startTime',
          tooltip: true,
        },
        {
          title: '结束时间',
          key: 'endTime',
          tooltip: true,
        },
        {
          title: '操作',
          key: 'action',
          fixed: 'right',
          width: 100,
        },
      ],
      seckillColumns: [
        {
          title: '商品名称',
          key: 'goodsName',
          tooltip: true,
          width: 200,
        },
        {
          title: '店铺名称',
          key: 'storeName',
          tooltip: true,
        },
        {
          title: '活动时间',
          key: 'timeLine',
          tooltip: true,
        },

        {
          title: '原价',
          key: 'originalPrice',
          tooltip: true,
        },
        {
          title: '现价',
          key: 'price',
          tooltip: true,
        },
        {
          title: '状态',
          key: 'promotionApplyStatus',
          tooltip: true,
        },

        {
          title: '操作',
          key: 'action',
          width: 100,
          fixed: 'right',
        },
      ],

      activeColumns: [], // 活动表头

      columns: [
        {
          title: '活动标题',
          key: 'title',
          tooltip: true,
          width: 200,
        },
        {
          title: '商品名称',
          key: 'goodsName',
          tooltip: true,
        },
        {
          title: '活动开始时间',
          key: 'startTime',
          tooltip: true,
        },
        {
          title: '活动结束时间',
          key: 'endTime',
          tooltip: true,
        },
        {
          title: '操作',
          key: 'action',
          fixed: 'right',
          width: 100,
        },
      ],

      promotionData: '', //商品集合

      showPromotionList: [], //显示当前促销的商品
    };
  },
  watch: {
    params: {
      handler() {
        this.index = 999;
        this.typeOption(this.promotions) &&
          this.typeOption(this.promotions).methodsed();
      },
      deep: true,
    },
  },
  mounted() {
    this.init();
  },

  methods: {
    changesize(v) {
      // 改变页数
      this.params.page = v.page;
      this.params.limit = v.limit;
      this.getList();
    },
    sortGoods(type) {
      this.loading = false;
      this.params.current - 1;
      this.showPromotionList = this.promotionList[type];
    },
    typeOption(type) {
      // 活动选项
      switch (type) {
        case 'FULL_DISCOUNT':
          return {
            title: '满减',
            methodsed: () => {
              this.showPromotionList = [];
              this.activeColumns = this.pintuanColumns;

              this.sortGoods('FULL_DISCOUNT');
            },
          };
        case 'PINTUAN':
          return {
            title: '拼团',
            methodsed: (id) => {
              this.showPromotionList = [];
              this.activeColumns = this.pintuanColumns;
              this.sortGoods('PINTUAN');
            },
          };

        case 'KANJIA':
          return {
            title: '砍价',
            methodsed: (id) => {
              this.showPromotionList = [];
              this.activeColumns = this.pintuanColumns;
              this.sortGoods('KANJIA');
            },
          };
        case 'SECKILL':
          return {
            title: '秒杀',
            methodsed: () => {
              this.showPromotionList = [];
              this.activeColumns = this.seckillColumns;
              this.sortGoods('SECKILL');
            },
          };
        case 'COUPON':
          return {
            title: '优惠券',
            methodsed: () => {
              this.showPromotionList = [];
              this.activeColumns = this.pintuanColumns;
              this.sortGoods('COUPON');
            },
          };
        case 'POINTS_GOODS':
          return {
            title: '积分商品',
            methodsed: () => {
              this.showPromotionList = [];
              this.activeColumns = this.pintuanColumns;
              this.sortGoods('POINTS_GOODS');
            },
          };
        default:
          return {};
      }
    },
    // 选择活动
    selectedPromotion(val, index) {
      console.log(val, index);
      val.___type = 'marketing';
      val.___promotion = this.promotions;
      this.$emit('selected', [val]);
      console.log([val]);

      this.index = index;
    },
    // 获取所有营销的活动
    async init() {
      const res = await getAllPromotion();
      if (res.success) {
        this.loading = false;
        this.getPromotion(res);
        // this.clickPromotion(this.typeOption[Object.keys(res.result)[0]], 0);
      } else {
        this.loading = false;
      }
    },
    getPromotion(res) {
      if (res.result) {
        this.promotionList = res.result;
        Object.keys(res.result)[0] &&
          this.typeOption(Object.keys(res.result)[0]).methodsed();
      }
      // if (Object.keys(res.result).length) {
      //   this.typeOption[Object.keys(res.result)[0]].methodsed(
      //     this.promotionList[Object.keys(res.result)[0]].id
      //   );
      // }
    },

    // 点击某个活动查询活动列表
    clickPromotion(val, i) {
      this.promotions = val;
      this.selectedIndex = i;
      this.params.current = 1;
      this.index = -1;
      this.typeOption(val) &&
        this.typeOption(val).methodsed(this.promotionList[val].id);
    },
  },
};
</script>
<style lang="scss" scoped>
img {
  max-width: 100% !important;
}

.search {
  width: 300px;
}

.page {
  margin-top: 2vh;
  text-align: right;
}

.time {
  font-size: 12px;
}

.tables {
  height: 400px;
  margin-top: 20px;
  overflow: auto;
  width: 100%;
}

::v-deep .ivu-table-wrapper {
  width: 100%;
}

.list {
  margin: 0 1.5%;
  height: 400px;
  overflow: auto;

  > .list-item {
    padding: 10px;
    transition: 0.35s;
    cursor: pointer;
  }

  .list-item:hover {
    background: #ededed;
  }
}

.list {
  flex: 1;
  width: auto;
}

.content {
  overflow: hidden;
  flex: 6;
}

.active {
  background: #ededed;
}

.wrapper {
  overflow: hidden;
}

.search-views {
  display: flex;

  > * {
    margin: 0 4px;
  }
}
</style>